<template>
	<view class="roombody">
			<view class="mask" @click="close()"  @touchmove.stop.prevent></view>
			<view class="room-body">
				<view class="room-head">
					<text>温馨大床房</text>
					<uni-icon type="closeempty" size="22" @click="close()" color="#7B7B7B"></uni-icon>
				</view>
				<view class="room-area" >
					<view class="header">
						<image class="header-bg" src="/static/banner.png" mode=""></image>
						<view class="play" @click="toRoomPos"></view>
						<view class="p-num" @click="play">
							<image src="/static/tupian.png" mode="aspectFit"></image>
							<text>10</text>
						</view>
						<view class="p-num" style="top: 288upx;">
							<image class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
						</view>
						<!-- <view class="back" @click="back">
							<image src="/static/fanhui.png" ></image>
						</view> -->
						<view class="header-bottom">
						</view>
					</view>
				
				<view class="room-info" v-if="!showMoreSm">
					<view class="room-name">
						<text>温馨大床房（有窗）</text>
					</view>
					<view class="room-tips">
						<view class="room-tips-item" v-for="(item,index) in tipsData" :key='index'>
							<image :src="item.icon" mode=""></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="sm-list">
					<view class="sm-item" v-for="(item,index) in smData" :key='index' v-if="showMoreSm || index<2 ">
						<view class="list-title">
							<text class='shu'></text>
							<text>{{item.name}}</text>
						</view>
						<text class="sm-top">(此编辑内容仅用来展示)</text>
						<view class="sm-text">
							<view class="text-item" v-for="(text,index) in item.data" :key='index'  >
								{{text}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="!showMoreSm" @click="moreSm" class="more-sm">
					<text>更多说明</text>
					<image src="../static/myPic/right.png" mode=""></image>
				</view>
				<view v-if="showMoreSm" @click="shouqiSm" class="more-sm">
					<text>收起说明</text>
					<image class="shouqi" src="../static/myPic/right.png" mode=""></image>
				</view>
				<view class="yuding-box" v-if="roomConf.showBottom">
					<text class="price">￥98</text>
					<button class="yuding" @click="toOrder">立即预定</button>
					<button class="join" @click="toChoose">加入行程</button>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		components:{
			uniIcon
		},
		props: {
			roomConf: {
				type: Object,
				default: function(){
					return {
						openMore:false,
						showBanner:true,
						showBottom:true
					}
				}
			},
		},
		data(){
			return{
				showMoreSm:false,
				showSmNum:2,
				current: 0,
				tipsData:[
					{
						icon:'../../../static/hotel/pingmishu.png',
						name:'30m2-38m2'
					},
					{
						icon:'../../../static/hotel/online.png',
						name:'免费WIFI'
					},
					{
						icon:'../../../static/hotel/chuanghu.png',
						name:'有窗'
					},
					{
						icon:'../../../static/hotel/dachuang.png',
						name:'大床'
					},
					{
						icon:'../../../static/hotel/zaocan.png',
						name:'无早餐'
					}
				],
				smData:[
					{
						name:'预定说明',
						data:[
							'①：需要连住，增加入住晚数即可。（无增加/减少的按钮时，说明该产品不支持连住，请联系客服。）',
							'②：入住时间可以重新选择（玩乐产品的日期也可重新选择，不做操作时，与入住日期为同一天）。',
							'③：有的产品需要先选择套餐，请跟随提示进行选择。'
						]
					},
					{
						name:'费用说明',
						data:[
						'①：需要连住，增加入住晚数即可。（无增加/减少的按钮时，说明该产品不支持连住，请联系客服。）',
						'②：入住时间可以重新选择（玩乐产品的日期也可重新选择，不做操作时，与入住日期为同一天）。',
						]
					},
					{
						name:'使用说明',
						data:[
						'①：需要连住，增加入住晚数即可。（无增加/减少的按钮时，说明该产品不支持连住，请联系客服。）',
						'②：入住时间可以重新选择（玩乐产品的日期也可重新选择，不做操作时，与入住日期为同一天）。',
						]
					},
					{
						name:'时间说明',
						data:[
						'①：需要连住，增加入住晚数即可。（无增加/减少的按钮时，说明该产品不支持连住，请联系客服。）',
						'②：入住时间可以重新选择（玩乐产品的日期也可重新选择，不做操作时，与入住日期为同一天）。',
						'③：有的产品需要先选择套餐，请跟随提示进行选择。'
						]
					},
					
				],
				
			}
		},
		methods:{
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeRoom()
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeRoom()
				//#endif
			},
			play(){
				uni.navigateTo({
					url:'/pages/home/hotel/photo'
				})
			},
			moreSm(){
				this.showMoreSm = true
				this.showSmNum = this.smData.length
			},
			shouqiSm(){
				this.showMoreSm = false
				this.showSmNum = 2
			},
			change(e) {
				this.current = e.detail.current;
				console.log(this.current)
			},
			toOrder(){
				uni.navigateTo({
					url:'order'
				})
			},
			toChoose(){
				uni.navigateTo({
					url:'hotelDate'
				})
			}
		},
		created() {
			if(this.roomConf.openMore==true){
				this.showMoreSm = true
			}else if(this.roomConf.openMore==false){
				this.showMoreSm = false
			}
			
		}
	}
</script>

<style scoped>
	.roombody{
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 40;
		left: 0;
	}
	/* swiper */
	.mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		background: rgba(0,0,0,0.3);
	}
	.swiper{
		width: 750upx;
		height: 400upx;
		
	}

	.swiper-item{
		width: 670upx;
		height: 347upx;
		margin-top: 26.5upx;
	}
	.swiper-item-in{
		width: 670upx;
		height: 400upx;
		margin-top: 0;
	}
	.room-area{
		width: 100%;
		height: calc(80vh - 158upx);
		overflow: scroll;
	}
	.swiper-item-in img{
		width: 630upx;
		height: 400upx;
		margin-left: 20upx;
		margin-right: 20upx;
		border-radius: 20upx;
	}
	.swiper-item img{
		width: 670upx;
		height: 347upx;
		border-radius: 20upx;
	}
	.dot-main {
		width: 750upx;
		height: 30upx;
		top:480upx;
		display: flex;
		position: absolute;
		z-index: 20;
		justify-content: center;
		align-items: center;
	}
	.dot-box{
		/* width: 86upx; */
		padding-left: 30upx;
		padding-right: 30upx;
		height: 40upx;
		border-radius: 20upx;
		background: rgba(0,0,0,0.5);
	}
	.dot-box text{
		color: #FFFFFF;
		display: block;
		/* width: 86upx; */
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		font-size: 28upx;
	}
	/* body */
	
	.room-body{
		width: 750upx;
		border-radius: 40upx 40upx 0 0;
		height: 80vh;
		background: #ffffff;
		position: absolute;
		bottom: 0;
		z-index: 99;
		overflow:scroll;
		scroll-y:hidden;
	}
	.room-body::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
	.room-head{
		width: 750upx;
		height: 90upx;
	}
	.room-head text{
		font-size: 36upx;
		margin-left: 43upx;
		float: left;
		line-height: 90upx;
	}
	.room-head image{
		width: 28px;
		height: 28px;
		margin-right: 30upx;
		float: right;
	}
	.room-photos{
		width: 750upx;
		height: 400upx;
		margin-top: 50upx;
	}
	.room-info{
		width: 750upx;
		height:  150upx;
		margin-top: 30upx;
	}
	.room-name{
		margin-left: 33upx;
		font-size: 36upx;
		font-weight: bold;
	}
	.room-tips{
		width: 688upx;
		height: 100upx;
		margin-left: 31upx;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.room-tips-item{
		width: 33%;
		font-size: 24upx;
		float: left;
		line-height: 50upx;
		color: #666666;
	}
	.room-tips-item image{
		width: 20upx;
		margin-top: 15upx;
		height: 20upx;
		margin-right: 20upx;
		float: left;
	}
	.sm-list{
		width: 750upx;
		height: auto;
	}
	.sm-item{
		margin-top: 72upx;
		width: 750upx;
		height: auto;
	}
	.sm-text{
		width: 671upx;
		margin-left: 39upx;
	}
	.text-item{
		font-size: 28upx;
		color: #666666;
		text-indent: 56upx;
	}
	.sm-top{
		font-size: 28upx;
		margin-left: 39upx;
		color: #666666;
		margin-top: 40upx;
	}
	
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 32upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.yuding-box{
		width: 750upx;
		margin-top: 40upx;
		height: 98upx;
		box-shadow:0px -1px 3px #dcdada
	}
	.yuding{
		width: 240upx;
		height: 98upx;
		float: right;
		color: #FFFFFF;
		text-align: center;
		font-size: 36upx;
		border: none;
		border-radius: 0;
		line-height: 98upx;
		background: -webkit-linear-gradient(top, #54B0FF,#577AFF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(top, #54B0FF,#577AFF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(top, #54B0FF,#577AFF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to bottom, #54B0FF,#577AFF);
		/* 标准的语法 */
	}
	.join{
		width: 240upx;
		height: 98upx;
		float: right;
		color: #FFFFFF;
		text-align: center;
		font-size: 36upx;
		border: none;
		border-radius: 0;
		line-height: 98upx;
		background: rgba(121,155,252,1.00);
		margin-right: 0.5upx;
	}
	.price{
		font-size: 40upx;
		color: #E25115;
		margin-left: 46upx;
		line-height: 98upx;
	}
	.more-sm{
		width: 750upx;
		margin-top: 50upx;
		display: flex;
		flex-direction: row;
		margin-bottom: 30upx;
		justify-content:flex-end;
	}
	.more-sm text{
		color: #54B0FF;
		font-size: 30upx;
	}
	.more-sm image{
		padding-top: 10upx;
		margin-left: 20upx;
		width: 23upx;
		height: 14upx;
	}
	.shouqi{
		transform:rotate(180deg);
	}
	
	/* 头部视频 */
	.header{
		width: 750upx;
		height: 575upx;
		position: relative;
	}
	.header-bg{
		width: 750upx;
		height: 575upx;
		position: absolute;
	}
	.back{
		width: 60upx;
		height: 60upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.back image{
		width: 30upx;
		height: 36upx;
	}
	.play{
		position: absolute;
		top:235upx;
		left:342upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}
	.p-num{
		width: 125upx;
		height: 58upx;
		top: 183upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 17upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 13upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 58upx;
		float: left;
		margin-left: 16upx;
	}
	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		/* border-radius: 30upx 30upx 0 0; */
		background: #FFFFFF;
		position: absolute;
	}
</style>
